<!--
 * @description 指示器组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-indicator pure-indicator--index"
		:class="_classes"
		:style="_styles"
	>
		<view
			class="pure-indicator__index"
			v-for="i in total"
			:key="i"
			:class="{ 'pure-indicator__index--active': i === current + 1 }"
			@tap="$emit('change', i - 1)"
			>{{ i }}</view
		>
	</view>
</template>

<script>
import commonComponentOptions from "../../config/common-component-options";
export default {
	options: commonComponentOptions,
};
</script>

<script setup>
import { ref, computed } from "vue";
import props from "./props";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************

// **************************************************************************************************************
// * Options
// **************************************************************************************************************
defineOptions(commonComponentOptions);

// **************************************************************************************************************
// * Props
// **************************************************************************************************************
const _props = defineProps(props);

// **************************************************************************************************************
// * Emits
// **************************************************************************************************************
const _emits = defineEmits(["change"]);

// **************************************************************************************************************
// * Classes
// **************************************************************************************************************
const _classes = computed(() => {
	const array = [];

	// 静态模式
	if (_props.static) array.push("pure-indicator--static");

	return array;
});

// **************************************************************************************************************
// * Styles
// **************************************************************************************************************
const _styles = computed(() => {
	const array = [];

	// 默认颜色
	if (_props.color) array.push(`--pure-indicator-color: ${_props.color};`);

	// 激活颜色
	if (_props.activeColor)
		array.push(`--pure-indicator-active-color: ${_props.activeColor};`);

	// 大小
	if (_props.size) array.push(`--pure-indicator-index-size: ${_props.size};`);
	if (_props.fontSize)
		array.push(`--pure-indicator-index-font-size: ${_props.fontSize};`);

	return array;
});

// **************************************************************************************************************
// * Computed
// **************************************************************************************************************

// **************************************************************************************************************
// * Functions
// **************************************************************************************************************
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>
